<template>
	<!--pages/serviceSubmit/serviceSubmit.wxml-->
	<view class="container">
		<view class="contaniner_con">
			<view class="good" v-for="(item, index) in list" :key="index">
				<image class="good-img" :src="item.goods_img"></image>
				<view class="good-right">
					<view class="good-right-name">{{item.goods_name}}</view>
					<view class="good-right-sku">{{item.sku_json_info.name?item.sku_json_info.name:''}}</view>
					<view class="good-right-price">￥{{item.price}} x{{item.less_num}}</view>
				</view>
			</view>
			<view class="reason">
				<view class="reason-title">{{type == 1?'退款原因':"换货原因"}}</view>
				<textarea maxlength="100" :placeholder="type == 1?'请输入退款原因......':'请输入换货原因......'" v-model="reason"
					class="reason-txt" :always-embed="true" placeholder-class="pl" cursor-spacing="0"></textarea>
			</view>
			<view class="address-wrap" v-if="type == 2">
				<block data-type="template" data-is="address" data-attr="...address">
					<view class="address" @tap="chooseAddress">
						<view class="addressImg">
							<image src="/static/images/address-1.png"></image>
						</view>
						<view class="addressBox">
							<view class="addressCon" v-if="address.name">
								<view class="addressInfo">
									<text class="phone-right">{{address.name}}</text>{{address.phone}}
								</view>
								<view class="addressDetail">{{address.address}}</view>
							</view>
							<view class="addressCon" v-else>请选择收货地址</view>
						</view>
						<view class="address-arrow">
							<image src="/static/images/arrow-1.png"></image>
						</view>
					</view>
				</block>
			</view>
			<view class="photo">
				<view class="reason-title photo-title">
					<text>上传凭证</text>
					<view>
						<text v-if="imageList.length>0" class="photo-title-tips">长按图片删除</text>
						<text class="photo-title-tips">{{imageList.length}}/3</text>
					</view>
				</view>
				<view class="uoload-wrap">
					<view v-for="(item, i) in imageList" :key="i" :data-index="i" @longpress="deleteImage">
						<image class="uoload-img" :src="item"></image>
					</view>
					<view v-if="imageList.length<3" class="reason-photo" @tap="chooseImg">
						<image class="reason-photo-img" src="https://safood.supplyocta.com/Public/MallSmallApp/photo.png"></image>
						<view class="reason-photo-text">上传凭证</view>
					</view>
				</view>
			</view>

		</view>
		<view class="btn_style flex-spe-cn">
			<view class="btn" @tap="commit">提交</view>
		</view>
	</view>
</template>

<script>
	// pages/serviceSubmit/serviceSubmit.js
	const app = getApp().globalData;
	const uploadimg = require("../../../utils/uploadimg.js");

	export default {
		data() {
			return {
				imageList: [],
				order_no: "",
				list: "",
				type: "",
				address: "",
				reason: "",
			};
		},

		components: {},
		props: {},
		onLoad: function(options) {
			var type = options.type;
			var order_no = options.order_no;
			var list = JSON.parse(options.list);
			this.setData({
				order_no,
				list,
				type
			});
		},

		onShow() {
			var that = this;
			var address = uni.getStorageSync('shoppingAddress');

			if (address) {
				that.setData({
					address: address
				});
			}
		},

		methods: {
			/**
			 * 提交申请
			 * 
			 */
			commit() {
				var that = this;
				var imageList = that.imageList;

				if (!that.reason) {
					uni.showToast({
						title: `请填写${that.type == 1 ? '退款' : '换货'}原因`,
						icon: 'none'
					});
				} else if (!that.address && that.type == 2) {
					uni.showToast({
						title: `请填写换货地址`,
						icon: 'none'
					});
				} else {
					if (imageList.length == 0) {
						that.callback();
					} else {
						uploadimg.uploadimg({
							url: '/Image/reason_img',
							path: imageList,
							//这里是选取的图片的地址数组
							formData: {},
							name: 'reason_img',
							res_name: 'reason_img_id'
						}, that.callback);
					}
				}
			},
			callback(resp) {
				var that = this;
				getApp().globalData.sendRequest({
					url: "/Order/doRefund_v3",
					type: "post",
					data: {
						order_no: that.order_no,
						refund_list: JSON.stringify(that.list),
						type: that.type == 1 ? 2 : 3,
						apply_reason: that.reason,
						user_name: that.type == 1 ? '' : that.address.name,
						user_phone: that.type == 1 ? '' : that.address.phone,
						user_province: 1 == that.type ? "" : that.address.province,
						user_city: 1 == that.type ? "" : that.address.city,
						user_area: 1 == that.type ? "" : that.address.area,
						user_address: that.type == 1 ? '' : that.address.detail,
						reason_img: String(resp)
					},
					success: function(res) {
						if (res.status == 1) {
							uni.showToast({
								title: "申请售后成功"
							});
							setTimeout(() => {
								uni.navigateBack({
									delta: 3
								})
							}, 1500);
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					}
				});
			},

			/**
			 * 上传图片
			 */
			chooseImg: function(event) {
				var that = this;
				var imageList = that.imageList;

				if (imageList.length < 3) {
					uni.chooseImage({
						count: getApp().globalData.roundPrice(3 - imageList.length),
						sizeType: ['original', 'compressed'],
						// 可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'],
						// 可以指定来源是相册还是相机，默认二者都有
						success: function(res) {
							console.log(res);
							imageList = imageList.concat(res.tempFilePaths);
							that.setData({
								imageList
							});
						}
					});
				}
			},
			// 删除图片
			deleteImage: function(e) {
				var that = this;
				var imageList = that.imageList;
				var index = e.currentTarget.dataset.index; //获取当前长按图片下标

				console.log(index);
				uni.showModal({
					title: '删除提示',
					content: '确定要删除此图片吗？',
					confirmText: '删除',
					confirmColor: '#ff5c6d',
					success: function(res) {
						if (res.confirm) {
							console.log(imageList);
							imageList.splice(index, 1);
							console.log(imageList);
							that.setData({
								imageList: imageList
							});
						}
					}
				});
			},
			// 选择地址
			chooseAddress: function() {
				uni.navigateTo({
					url: '../MyAddress/MyAddress?type=1'
				});
			}
		}
	};
</script>
<style>
	@import "./serviceSubmit.css";
</style>
